<template>
  <div class="flower">
    <div class="title">
      <h2>送恋人/爱情鲜花</h2>
    </div>
    <div class="items">
      <div class="item"
           v-for="(item, index) in items"
           :key="index"
           @click="$store.commit('home/click_Detail', item.id)">
        <img class="item-img"
             v-lazy="item.pic"
             alt="">
        <div class="item-info">
          <h4 class="name">
            {{ item.name }}
          </h4>
          <p class="desc"
             :title="item.characteristic">
            {{ item.characteristic?item.characteristic:'暂无描述' | itemTitle }}
          </p>
          <div class="action">
            <p class="price">
              {{ item.minPrice | itemPrice("￥")}}
            </p>
            <van-icon @click.stop="$store.commit('home/add_Cart',{id:item.id, num:1})"
                      class-prefix="icon"
                      name="shouye-jiarugouwuche"></van-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  filters: {
    itemTitle (v, len = 10) {
      if (v.length > len) {
        return v.substr(0, len) + '...'
      } else {
        return v
      }
    },
    itemPrice (v, sign = '$') {
      return sign + v
    }
  }/* ,
  methods: {
    DetailItem (id, index) {
      this.$emit('clickItem', { id, index })
    },
    clickCart (id, index) {
      this.$emit('clickCart', { id, index })
    }
  } */

}
</script>

<style lang="scss" scoped>
.flower {
  padding-top: 28px;
  .title {
    text-align: center;
    h2 {
      font-size: 20px;
      font-weight: 600;
    }
  }
  .items {
    .item {
      width: 94%;
      margin: 12px auto;
      height: 190px;
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-img {
        width: 170px;
        height: 100%;
      }
      .item-info {
        height: 100%;
        flex: 1;
        padding: 12px 16px;
        display: flex;
        flex-direction: column;
        .name {
          font-size: 15px;
          font-weight: bold;
        }
        .desc {
          font-size: 14px;
        }
        .action {
          flex: 1;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          .price {
            padding-bottom: 15px;
            font-weight: bold;
          }
          .icon {
            font-size: 24px;
            color: #ff734c;
          }
        }
      }
    }
  }
}
</style>
